<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心页面头</title>
    <style>
        *{
            margin: 0;/*清除外边距*/
            padding: 0;/*清除内边距*/
            list-style: none;/*删除<li>标签生成的点*/
            background: #f0e8d4;
        }
        #ulfather{
            display: flex;/*设置为弹性盒*/
            background-color: rgb(215, 118, 22);/*设置栏目背景为深紫色*/
            box-shadow: 2px 5px 15px rgba(208, 161, 79, 0.7);/*阴影效果*/
            border-radius: 5px;/*圆角效果*/
            width: 360px;/*导航栏宽度*/
            height: 44px;/*导航栏长度*/
            line-height: 30px;/*文字垂直居中*/
        }
        .lifather{
            width: 120px;/*每个栏目占宽70像素，把350像素的导航栏5等分*/
            text-align: center;/*文字水平居中*/
            color: rgb(160, 160, 230);/*设置字体颜色为浅紫色*/
        }

        .ulson{
            background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/
            border-radius: 0px 0px 5px 5px;/*圆角效果*/
            color: rgb(250, 250, 250);/*设置字体颜色为白色*/
            display: none;/*初始状态为隐藏*/
        }
        .lifather:hover .ulson{
            display: block;
        }
        .lison:hover{
            background-color: rgba(0, 0, 0, .3);
        }
        a{text-decoration:none}
        /*鼠标点击前*/
        a:link {
            color: #313030;
        }
        /*鼠标点击过后*/
        a:visited {
            color: #313030;
        }
        /*鼠标悬停时*/
        a:hover {
            color:#f99e01;
        }

        /*鼠标点击中*/
        a:active {
            color:#313030;
        }
    </style>
</head>
<body>
    <div th:include="common/inc"></div>
    <div style="float: left;">
        <div style="margin-left: 10px;margin-top: 5px">
            <a href="/moyue" target="_parent" style="text-decoration: none;font-size:18px;margin-left:3px;color:#9E9E9E;">
                <img src="../../img/logoBlack.png" width="150px" height="50px" style="border-radius: 20%;float: left"/>&nbsp;&nbsp;
            </a>
        </div>
    </div>
    <div style="float: right;margin-top: 5px;">
        <ul id="ulfather"><!--创建父列-->
            <li class="lifather">
                <a href="/moyue" target="_parent" style="line-height: 44px;font-size: 20px">墨阅首页</a>
            </li>
            <li class="lifather">
                <a th:href="@{/user/toLoginAuthor}" target="_parent" style="line-height: 44px;font-size: 20px">作家专区</a>
            </li>
            <li class="lifather">
                <h4>
                    <a><img src="../../img/logo.jpg" style="border-radius: 50%;width: 30px;height: 30px;margin-top: -4px"></a>
                </h4>
                <ul class="ulson" style="margin-top: -2px"><!--创建子列-->
                    <li class="lison">
                        <a th:href="@{/user/toVip}" target="_parent">充值中心</a>
                    </li>
                    <li class="lison">
                        <a th:href="@{/user/removeUser}" target="_parent">退出登录</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>